<template>
  <div class="header">
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#fff">
      <span  style="margin-left: 50px; line-height:57px; color:#fff; font-size:14px">零件库存管理</span>
      <span class="header-float-right">
        <el-submenu index="2">
          <template slot="title">{{username}}</template>
            <el-menu-item index="2-1" @click="changePassword">更改密码</el-menu-item>
            <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
        </el-submenu>
        </span>

    </el-menu>


    <!--更改密码模态框-->
    <el-dialog title="更改密码" :visible.sync="changePasswordDialogVisible">
      <el-form :model="changePasswordForm" status-icon ref="changePasswordForm">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input type="password" v-model="changePasswordForm.oldPassword" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="changePasswordForm.newPassword" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="newPassword2">
          <el-input type="password" v-model="changePasswordForm.newPassword2" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postChangePasswordForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {putPassword} from '../api'
  export default {
    name: "headeBar",
    data() {
        return {
          username: '',
          changePasswordDialogVisible: false,    // 是否显示更改密码模态框
          ifChageFlag: false,    // 是否正在进行修改密码操作

          // 修改密码的表单
          changePasswordForm:{
            oldPassword:'',
            newPassword:'',
            newPassword2:'',
          },
        };
    },
    methods: {
      logout(){    // 注销
        localStorage.removeItem('token');
        this.$router.push('/login');
      },
      // 获取用户名
      getUsername(){
        this.username = JSON.parse(sessionStorage.getItem('userInfo')).username;
      },
      // 修改密码
      changePassword(){
        this.changePasswordForm.oldPassword = '';
        this.changePasswordForm.newPassword = '';
        this.changePasswordForm.newPassword2 = '';
        this.changePasswordDialogVisible = true;
      },

      // 提交修改密码表单
      async postChangePasswordForm(){
        //防止重复提交
        if(this.ifChageFlag){
          this.$message.warning('正在处理，请不要重复提交');
          return
        }

        // 核对输入信息
        let oldPassword = this.changePasswordForm.oldPassword.trim();
        let newPassword = this.changePasswordForm.newPassword.trim();
        let newPassword2 = this.changePasswordForm.newPassword2.trim();
        if( !oldPassword || !newPassword || !newPassword2) {
          this.$message.error('输入有误，请核对信息');
          return
        }else if(newPassword !== newPassword2) {
          this.$message.error('两次输入的密码不一致');
          return
        }else if (oldPassword === newPassword){
          this.$message.error('新密码不能和原密码一样');
          return
        }

        // 开始提交数据
        this.ifChageFlag = true;
        let data = {
          old_password: oldPassword,
          password: newPassword
        };
        let res = await putPassword(data);
        this.ifChageFlag = false;
        if(res.status===200){
          this.$message.success('更改密码成功,请重新登录');
          this.changePasswordDialogVisible = false;
          localStorage.removeItem('token');
          window.setTimeout(()=>{
            this.$router.push({path: '/login',query:{to:this.$route.path}})    // 1秒后跳回登录页
          },1000);

        }else if(res.status===403){
          this.$message.error('操作异常');

          }else {
          if(res.data.non_field_errors){
            this.$message.error(res.data.non_field_errors[0]);
          }else{
            this.$message.error(res.data.detail)
          }
        }
      }
    },
    computed: {},
    components: {},
    created(){
      this.getUsername()
    }
  }
</script>

<style scoped>

</style>
